﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var map = initMap();

            //地图视图的初始参数
            var view = map.getView();
            var zoom = view.getZoom();
            var center = view.getCenter();
            //var rotation = view.getRotation();

            //平移功能
            document.getElementById('panto').onclick = function () {
                var X = $("#Xposition").val();
                var Y = $("#Yposition").val();
                if (X != "" && Y != "") {
                    if (!isNaN(X) && !isNaN(Y)) {
                        //字符串转数字
                        var pntX = parseInt(X);
                        var pntY = parseInt(Y);
                    } else {
                        alert('请输入数字！');
                        return;
                    }
                } else {
                    alert('请输入内容！');
                    return;
                }
                console.log([pntX, pntY]);
                //获取地图视图
                var view = map.getView();

                //平移地图
                view.setCenter([pntX, pntY]);
                view.setZoom(6);
            }
            //复位功能（复位到初始状态）
            document.getElementById('restore').onclick = function () {
                //初始中心点
                view.setCenter(center);
                //初始旋转角度
                // view.setRotation(rotation);
                //初始缩放级数
                view.setZoom(zoom);
            };
        }


    </script>
</head>
<body>
    <div class="ToolLib">
        <span class="style1">
            <label>
                <strong>X坐标:</strong>
            </label>
        </span>
        <input id="Xposition" type="text" value="114" />
        &nbsp; &nbsp;
        <span class="style2">
            <label>
                <strong>Y坐标:</strong>
            </label>
        </span>
        <input id="Yposition" type="text" value="30" />
        <input type="button" class="ButtonLib" id="panto" value="平移" />
        <input type="button" class="ButtonLib" id="restore" value="复位" />
    </div>

    <div id="map">
    </div>
</body>
</html>
